<template>
  <div @scroll="minsdbox" class="pagesd">
    <NavView v-bind:navList="navList"></NavView>
    <router-View></router-View>
    <!---->
    <!-- <PresenTation></PresenTation> -->
    <FootViews :footLists="footLists"></FootViews>

  </div>
</template>


<script>
// import { ref } from 'vue'
// import { mapMutations } from 'vuex';
import NavView from '../components/NavView.vue'
// import PresenTation from './components/PresenTation.vue'
import FootViews from '../components/FootViews.vue'


// const store = createStore();
// const scrolliste = ref(true)
// const incrementf = ref(null)
// state.scrollist = store.state.scrollist;
// scrolliste.value = state.scrollist
// // computed(() =>)
// incrementf = () => store.commit('increment');
// return {
//   scrolliste, incrementf

// }

export default {

  data() {
    return {

      sdata: this.$store.state.scrollist,
      // 导航数据
      navList: [
        {
          words: "首页", adds: "/", isfasle: false, titlelist: []
        },
        {
          words: "商品展示", adds: "/about", isfasle: false, titlelist: []
        }, {
          words: "用户", adds: "/login", isfasle: false, titlelist: [{
            titles: "jsds", ff: "df", cisi: "dfgdf"
          }]
        }, {
          words: "商品", adds: "/", isfasle: false, titlelist: []
        },
        {
          words: "更多", adds: "/about", isfasle: true,
          titlelist: [{
            titles: "标题一", ff: "第一是倒计时", cisi: "时代大厦", isjd: '../assets/logo.png', color: "black"
          }, {
            titles: "标题二", ff: "对方的", cisi: "的方法大厦", isjd: '../assets/logo.png', color: "#00f6ffe8"
          }, {
            titles: "标题三", ff: "三", cisi: "但是", isjd: '../assets/logo.png', color: "red"
          }, {
            titles: "标题四", ff: "但是", cisi: "但是", isjd: '../assets/logo.png', color: "white"
          },]
        }, {
          words: "用户", isfasle: false, adds: "/login", titlelist: []
        }
      ],
      //下滑数据
      scrolladdress: 0,
      //脚部数据
      footLists: [
        { titles: "标题一", listdat: "烧烤喝酒,加入,吉德津科,的肌肤,度假酒店,的空间" },
        { titles: "标题er", listdat: "烧烤喝酒,加入,吉德津科,的肌肤,度假酒店,的空间" },
        { titles: "标题三", listdat: "烧烤喝酒,加入,吉德津科,的肌肤,度假酒店,的空间" },
      ]
    }
  },
  provide() {
    return {
      skak: this.scrolladdress
    }
  },
  components: {
    NavView,
    // PresenTation,
    FootViews,
  },

  // data() {
  //   return {

  //   }

  // },

  // provide() {
  //   return {
  //     skak: this.scrolladdress
  //   }
  // },
  // mounted() {
  //   console.log(createStore);

  // },

  methods: {
    minsdbox(e) {
      //this.$store.state.scrollist = this.sdata
      //console.log(e.target.scrollTop)
      if (e.target.scrollTop !== 0) {
        // this.scrolladdress = 1
        // this.skak = 1
        this.$store.state.scrollist = 1
      } else {
        this.$store.state.scrollist = 0
      }
      return this.$store.state.scrollist
      // this.$store.commit("increment")
      // increment()
      // console.log(this.$store.commit('methodName', [...mapMutations].increment))
    },
  },
  // watch: {
  //   scrolladdress(addvent, bn) {
  //     if (addvent == 0 && bn == 0) {
  //       this.scrolladdress = 0
  //       this.skak = 0
  //     } else {
  //       this.scrolladdress = 1
  //       this.skak = 1
  //     }
  //   },

  // }

}


</script>

<style lang="css" scoped>
.pagesd {
  overflow-y: scroll;
  height: 650px;
  margin-top: 70px;
}

/**
首页导航
*/
/* .navviews {
  width: 100%;
  height: 70px;
  background: black;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
}

.logosbox {
  width: 205px;
  height: 70px;

}

.logosbox img {
  width: 50px;
  height: 56px;
  padding-top: 8px;
}

.naxbox {
  width: 905px;
  height: 70px;
}

.naxbox ul {
  display: flex;
  justify-content: flex-start;
  margin: 0px 16px 0px 16px;
}

.naxbox ul li {
  width: 200px;
  height: 70px;
  line-height: 70px;
  list-style: none;

}

.naxbox ul li a {
  text-decoration-line: none;
  color: white !important;
  font-size: 20px;
  font-weight: 290;
  font-family: Arial, Helvetica, sans-serif;
}

.boxthreen {

  display: flex;
  justify-content: center;
  align-items: center;
}

.boxthreen img {
  width: 20px;
  height: 20px;

}

.boxthreen p {
  width: 48px;
  font-size: 17px;
  color: aqua;
  margin-top: 14px;
  color: black;
}

.disbox {
  display: flex;
  transition: 2s;
  width: 972px;
  background: white;
  position: absolute;
  left: 20%;
  top: 68px;
  z-index: 2;

}

.arrowboxdis {
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 22px solid white;
  position: relative;
  left: 43px;
  z-index: 5;
  top: -23px;

}
.arrowboxnoe {
  display: none;
  position: relative;
  z-index: 2;
}
.disssbox p {
  color: black;
}

*/
/*备份 */
.navviews {
  width: 100%;
  height: 70px;
  /* background: blue; */
  background: black;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  position: fixed;
  top: 0;
}

.arrowboxdis {
  /* display: block;
  position: relative;
  width: 25px;
  height: 20px;
  border-top: transparent;
  border-left: 15px;
  border-right: 15px;
  border-bottom: 25px;
  background: red;
  z-index: 2; */

  width: 0;
  height: 0;

  /* border-top: 0px solid transparent; */
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 22px solid white;
  position: relative;
  left: 43px;
  z-index: 5;
  top: -23px;

}

.disbox {
  display: flex;
  transition: 2s;
  width: 972px;
  /* height: 340px; */
  background: white;
  position: absolute;
  left: 20%;
  top: 68px;
  z-index: 2;

}
</style>